<template>
  <div :class="colClass" :style="colStyle">
    <div style="border:1px solid greenyellow">
      <slot></slot>
    </div>
    <!--<slot></slot>-->
  </div>
</template>

<script>
let validator = value => {
  let keys = Object.keys(value);
  let valid = true;
  keys.forEach(key => {
    if (!["span", "offset"].includes(key)) {
      valid = false;
    }
  });
  return valid;
};

export default {
  name: "f-col",
  inject: ["gutter"],
  props: {
    span: {
      type: [Number, String]
    },
    offset: {
      type: [Number, String]
    },
    phone: { type: Object, validator },
    pad: { type: Object, validator },
    narrowPc: { type: Object, validator },
    pc: { type: Object, validator },
    widePc: { type: Object, validator }
  },
  methods:{
    createClasses(obj,str = ''){ //str: pad- pc- ...
      if(!obj) return [];
      let arr = [];
      if(obj.span){arr.push(`col-${str}${obj.span}`)}
      if(obj.offset){arr.push(`offset-${str}${obj.offset}`)}
      return arr;
    }
  },
  computed: {
    colClass() {
      let { span, offset, phone, pad, narrowPc, pc, widePc, createClasses } = this;

      return [
        "col",
        ...createClasses({span,offset}),
        ...createClasses(phone,'phone-'),
        ...createClasses(pad,'pad-'),
        ...createClasses(narrowPc,'narrowPc-'),
        ...createClasses(pc,'pc-'),
        ...createClasses(widePc,'widePc-'),
      ];
    },
    colStyle() {
      let { gutter } = this;
      return {
        paddingLeft: gutter / 2 + "px",
        paddingRight: gutter / 2 + "px"
      };
    }
  }
  /*,beforeCreate() {
    console.log('beforeCreate:this.gutter', this.gutter); //undefined
  }
  ,created() {
    console.log('created:this.gutter', this.gutter); //有值
  }*/
};
</script>

<style lang="scss">
.col {
  /*flex-shrink:0; //不妥协，不进行缩放，相较于在row上flex-wrap:wrap会出现横向滚动条*/
  /*flex-grow: 1; //如果不设置span，或则一个row中的span不满，gutter是有bug的*/

  /*width: 50%;*/
  /*padding: 0 10px; //也就是gutter为20时的padding值*/

  height: 100px;
  background: grey;
  border: 1px solid red;

  $class-prefix: col-;

  @for $n from 1 through 24 {
    &.#{$class-prefix}#{$n} {
      width: ($n/24) * 100%;
    }
  }

  $class-prefix: offset-;

  @for $n from 1 through 24 {
    &.#{$class-prefix}#{$n} {
      margin-left: ($n/24) * 100%;
    }
  }

  & img {
    max-width: 100%;
  }

  // 上下css都生效，后写的生效
  @media (max-width: 576px) {
    $class-prefix: col-phone-;

    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        width: ($n/24) * 100%;
      }
    }

    $class-prefix: offset-phone-;

    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        margin-left: ($n/24) * 100%;
      }
    }
  }

  @media (min-width: 577px) {
    $class-prefix: col-pad-;

    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        width: ($n/24) * 100%;
      }
    }

    $class-prefix: offset-pad-;

    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        margin-left: ($n/24) * 100%;
      }
    }
  }

  @media (min-width: 769px) {
    $class-prefix: col-narrow-pc-;

    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        width: ($n/24) * 100%;
      }
    }

    $class-prefix: offset-narrow-pc-;

    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        margin-left: ($n/24) * 100%;
      }
    }
  }

  @media (min-width: 993px) {
    $class-prefix: col-pc-;

    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        width: ($n/24) * 100%;
      }
    }

    $class-prefix: offset-pc-;

    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        margin-left: ($n/24) * 100%;
      }
    }
  }

  @media (min-width: 1201px) {
    $class-prefix: col-wide-pc-;

    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        width: ($n/24) * 100%;
      }
    }

    $class-prefix: offset-wide-pc-;

    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        margin-left: ($n/24) * 100%;
      }
    }
  }
}
</style>
